<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>Document</title>
</head>
<style>
	*{
		margin: 0;
		padding: 0;
	}
	body,html{
		width: 100%;
		height: 100%;
	}
	.slide-container{
		position: relative;
		width: 100%;
		height: 100%;
		margin: 0 auto;
		overflow: hidden;
		font-size: 0;
	}
	.slide-container .slide-wrap,.slide-container .slide-item{
		position: relative;
		display: inline-block;
		height: 100%;
		white-space: nowrap;
	}
	.slide-container .slide-item{
		font-size: 20px;
		overflow: hidden;
	}
	.slide-container .btn{
		position: absolute;
		top: 50%;
		margin-top: -10px;
		width: 20px;
		height: 20px;
		line-height: 20px;
		text-align: center;
		cursor: pointer;
		background-color: #ccc;
		font-size: 16px;
	}
	.slide-container .btn.prev{
		left: 10px;
	}
	.slide-container .btn.next{
		right: 10px;
	}
	.slide-container .index-round{
		position: absolute;
		bottom: 10px;
		width: 100%;
		height: 20px;
		text-align: center;
	}
	.slide-container .index-round>li{
		display: inline-block;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: black;
		opacity: 0.2;
		margin-left: 10px;
		margin-top: 5px;
	}
	.slide-container .index-round>li:first-child{
		margin-left: 0;
	}
	.slide-container .index-round>li.active{
		opacity: 0.6;
	}
</style>
<body>
	<div class="slide-container">
		<div class="slide-wrap">
			<a href="#" class="slide-item"><img src="http://pic1.win4000.com/wallpaper/d/54114cbde79fa.jpg" alt=""></a>
			<a href="#" class="slide-item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1519567131463&di=f69432a0e8ed808964c4c4b8bfdbc517&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F9%2F57cd08be531ca.jpg" alt=""></a>
			<a href="#" class="slide-item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1519557032&di=a5b1ac84ae8a56664d5d2d4f30770ed5&src=http://baiducdn.pig66.com/uploadfile/2017/0511/20170511074600246.jpg" alt=""></a>
		</div>
		<div class="btn prev"><</div>
		<div class="btn next">></div>
		<ul class="index-round"></ul>
	</div>
</body>
<script src="slide.js"></script>
<script>
	var c = new Slide('slide-container',{loop:true});
</script>
</html>